<!--
  Gz search 条件通用组件
  @author will
  @site https://pt.jdyd.xyz
  @date 2021/12/27 19:14
-->

<template>
  <div class="table-page-search-wrapper">
    <!-- 表格组件标题 -->
    <!-- <div class="table-name"><b>{{ tableName }}</b></div> -->
    
    <a-form layout="inline" class="table-head-ground">
      <div ref="tableLayer" class="table-layer">
        <slot />
        <div class="table-search-item">
          <a-button :disabled="disabled" type="primary" @click="searchFunc"><search-outlined />查询</a-button>
          <button v-show="false" :disabled="disabled" type="primary" @click="searchFunc" @keyup.enter="searchFunc1">查询</button>
          <a-button :disabled="disabled" class="ref-left-10" @click="props.resetFunc"><reload-outlined />重置</a-button>
          <slot name="footer" />
        </div>
      </div>
    </a-form>
  </div>

  <div class="split-line">
    <div v-if="vdata.searchConditionFlag !== 'none'" class="btns">
      <div v-if="vdata.searchConditionFlag == 'less'" @click="moreSearchConditionAction(true)">更多筛选<i class="bi bi-chevron-down" /></div>
      <div v-else @click="moreSearchConditionAction(false)">收起筛选<i class="bi bi-chevron-up" /></div>
    </div>
  </div>
</template>

<script setup lang="ts">
import {ref, reactive, getCurrentInstance, onMounted, defineProps,defineEmits} from 'vue'
import { useRoute } from 'vue-router'

// 获取当前路由标题
const route = useRoute()
let routeTitle = route.matched
let tableName = routeTitle[routeTitle.length - 1].meta.title

const tableLayer = ref() // 获取父元素DOM对象

// 定义传入属性
const props = defineProps({
  searchConditionNum: { type: Number, default: 7 }, // 默认显示的搜索数量(不包含两个按钮)
  searchFunc: { type: Function , default: () => {} }, //搜索条件
  resetFunc: { type: Function , default: () => {}},
  disabled: { type: Boolean, default: false }, // 是否禁用搜索按钮
  searchFunc1:{type: Function , default: () => {}}
})

// const emits = defineEmits(['searchFunc1'])

const searchFunc1 = () =>{
  console.log('触发按键事件')
}

onMounted(() => {
  // 获取子元素节点
  moreSearchConditionAction(false)
})

let vdata = reactive({
  searchConditionFlag : 'hide' // 搜索条件显示类型： hide: 不显示该按钮，   less: 精简搜索，  more : 包含更多搜索
})

// 更多条件， 显示 or  隐藏
function moreSearchConditionAction(isShow){

  let layerList = tableLayer.value.getElementsByClassName('table-search-item')
  if(layerList.length - 1 <= props.searchConditionNum){
    return vdata.searchConditionFlag = 'none'
  }

  // 更改页面显示效果
  vdata.searchConditionFlag = isShow ? 'more' : 'less'

  // 显示 or 隐藏
  for(let i = props.searchConditionNum; i < layerList.length - 1; i++) {
    layerList[i].style.display = isShow ? 'flex': 'none'
  }
}

</script>

<style scoped lang="less">
.split-line {
  border-bottom: 1px solid #ebeff2;
  position: relative;
  -webkit-touch-callout: none;
  user-select: none;
}

.btns {
  width: 100px;
  height: 34px;
  cursor: pointer;
  border: 1px solid #ebeff2;
  border-radius: 5px;
  position: absolute;
  left: 50%;
  margin-left: -50px;
  top: 50%;
  margin-top: -17px;
  background-color: #fff;
  font-size: 12px;

  div {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 10;
    color: #79807E;
  }
}
.btns::before {
  content: '';
  position: absolute;
  width: calc(100% + 2px);
  height: 50%;
  background-color: #fff;
  top: -1px;
  left: -1px;
  z-index: 1;
}

i {
  display: inline-block;
  margin-left: 5px;
}
.bi-chevron-up::before,  .bi-chevron-down::before{
  font-size: 6px;
}

</style>
